import React, { FC } from 'react'

// import { useRequest } from 'ahooks'
import { UserOutlined } from '@ant-design/icons'
import { Link, useNavigate } from 'react-router-dom'
// import { getUserInfoService } from '../../service/users'
import { useDispatch } from 'react-redux'
import { Button } from 'antd'
import { removeToken } from '../../utils/user-token'
import useGetUserInfo from '../../hooks/useGetUserInfo'
import { logoutReducer } from '../../store/userReduce'
const UserInfo: FC = () => {
  // const { data } = useRequest(getUserInfoService)
  // const { username = '', nickname = '' } = data || {}
  const { username, nickname } = useGetUserInfo()
  const nav = useNavigate()
  const dispatch = useDispatch()
  const logout = () => {
    removeToken()
    dispatch(logoutReducer())
    nav('./login')
  }
  console.log(username, nickname)
  const UserInfo = (
    <>
      <span style={{ color: '#e8e8e8' }}>
        <UserOutlined></UserOutlined>
        {nickname}
        <Button type="link" onClick={logout}>
          退出
        </Button>
      </span>
    </>
  )
  const LoginInfo = <Link to="./login">登录</Link>
  return <div>{username ? UserInfo : LoginInfo}</div>
}
export default UserInfo
